<template>
    <div id="root">
        <div class="data_arr">
            <input type="text" v-model="input_data" />
            <ul>
                <li
                    v-for="(item,index) in search_options"
                    class="value_box"
                    :key="index"
                    @click="add(item)"
                >
                    <div class :class="value.indexOf(item)==-1?`no_select`:`select`"></div>
                    <div class>{{item.title}}</div>
                    <div>{{item.user}}</div>
                </li>
            </ul>
        </div>
        <div class="select_arr">
            <div class="select_title">已选择数据</div>
            <ul>
                <li v-for="(item,index) in value" class="value_box" :key="index" @click="add(item)">
                    <!-- <div class="" :class="value.indexOf(item)==-1?`select`:`no_select`"></div> -->
                    <div class>{{item.title}}</div>
                    <div>{{item.user}}</div>
                    <div>x</div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        value: "",
        options: "",
    },
    data() {
        return {
            input_data: "",
        };
    },
    computed: {
        search_options: function () {
            let { options, input_data } = this;
            if (input_data) {
                return options.filter((value) => {
                    console.log(value, this.input_data);
                    return value.title.indexOf(this.input_data) != -1
                        ? value
                        : null;
                });
            } else {
                return options;
            }
        },
    },
    methods: {
        add(item) {
            console.log(this.value.indexOf(item));
            if (this.value.indexOf(item) == -1) {
                this.value.push(item);
                console.log(1);
            } else {
                console.log(2);
                this.value.splice(this.value.indexOf(item), 1);
            }
            console.log(this.value);
        },
    },
};
</script>

<style>
</style>
<style scoped>
li,
ul {
    list-style: none;
    padding: 0;
}

#root {
    display: flex;
    justify-content: center;
    width: 100vw;
    min-width: 900px;
}

#root > div {
    flex: 1;
    border: 1px solid #ccc;
    margin: 10px 20px;
}

.select {
    width: 15px;
    height: 15px;
    border: 1px solid #ccc;
    background: green;
}

.no_select {
    width: 15px;
    height: 15px;
    border: 1px solid #ccc;
}

.value {
}

.select_arr {
    flex: 1;
    border: 1px solid #ccc;
}

.value_box {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    cursor: pointer;
    user-select: none;
}

input {
    display: inline-block;
    width: 350px;
    height: 50px;
    margin: 20px;
    padding: 10px;
    border: 1px solid #ccc;
}

.select_title {
    height: 50px;
}
</style>